<template>
  <div class="article-manager">

    <el-card :bordered="false" shadow="never" class="ivu-mt mt16">
      <div>
        <el-form ref="keyWordFrom" :model="keyWordFrom" inline>
          <el-form-item label-for="key_word">
            <el-input clearable placeholder="请输入关键词" v-model="keyWordFrom.key_word" class="form_content_width" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-db-click @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-button type="primary" class="bnt" v-db-click @click="addWord">添加关键词</el-button>
      <vxe-table class="mt14" highlight-hover-row :loading="loading" header-row-class-name="false"
        :tree-config="{ children: 'children' }" :data="tableData">
        <vxe-table-column field="id" title="ID" tooltip></vxe-table-column>
        <vxe-table-column field="key_word" title="关键词"></vxe-table-column>


        <vxe-table-column field="date" title="状态" width="120" fixed="right">
          <template v-slot="{ row, index }">

            <el-tag class="point" type="danger" v-if="row.status == 0" @click="status(row.id, 1)">禁用中</el-tag>
            <el-tag class="point" v-if="row.status == 1" @click="status(row.id, 0)">启用中</el-tag>
          </template>
        </vxe-table-column>



        <vxe-table-column field="date" title="查看" width="120" fixed="right">
          <template v-slot="{ row, index }">

            <el-tag class="point" v-db-click @click="showChat(row.id)">触发消息</el-tag>

          </template>
        </vxe-table-column>

      </vxe-table>


      <div class="acea-row row-right page">
        <pagination v-if="total" :total="total" :page.sync="keyWordFrom.page" :limit.sync="keyWordFrom.limit"
          @pagination="pageChange" />
      </div>
    </el-card>

    <!-- 添加关键词 -->
    <el-dialog title="添加关键词" :visible.sync="createModals" :before-close="cancel" :close-on-click-modal="false"
      width="600px">
      <el-form class="form" ref="createFrom" label-width="80px" label-position="left">
        <el-row :gutter="24">

          <el-col>
            <el-form-item label="关键词:" prop="name">
              <el-input type="text" placeholder="请输入关键词" :maxlength="20" v-model="createFrom.key_word" />
            </el-form-item>
          </el-col>
        </el-row>


        <div class="acea-row row-left">
          <el-button type="primary" @click="createKeyword">添加</el-button>
          <el-button @click="createModals = false">取消</el-button>
        </div>


      </el-form>
    </el-dialog>
 

    <!-- 查看聊天 -->
    <el-dialog :visible.sync="chatShow" title="聊天记录" width="1040px" top="0px" :close-on-click-modal="false">

      <template>
        <el-table    :data="chatList" row-key="id"  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" lazy>

          <el-table-column tooltip width="100">
            <template v-slot="{ row, index }">
                <div>{{row.relevance_id ? "上一条消息"  : '' }} </div>
            </template>

          </el-table-column>

          <el-table-column prop="id" label="ID" tooltip width="50">
            <template v-slot="{ row, index }">
                <div>{{row.relevance_id ? ""  :  row.id }} </div>
            </template>

          </el-table-column>

          <el-table-column prop="username" label="发送人"></el-table-column>

          <el-table-column  label="消息类型">
            <template v-slot="{ row, index }">
                <div>{{row.msg_type_txt || row.msg_type  }} </div>
            </template>
          </el-table-column>

          <el-table-column prop="msg" label="消息内容"></el-table-column>
          <el-table-column prop="msg_time" label="发送时间"></el-table-column>
          <el-table-column prop="conv_type_txt" label="聊天类型"></el-table-column>
          <el-table-column prop="to_username" label="接受者"></el-table-column>
 

        </el-table>

        <div class="acea-row row-right page">
          <pagination v-if="total_chat" :total="total_chat" :page.sync="chatForm.page" :limit.sync="chatForm.limit"
            @pagination="pageChatChange" />
        </div>
      </template>

    </el-dialog>


  

  </div>
</template>

<script>
import { mapState } from 'vuex';

import { keyWordStatusApi, getKeyWordListApi, keyWordChatRelevanceListApi, createImKeyword, keyWordChatListApi } from '@/api/user';

 
export default {
  name: 'product_productClassify',
  components: {
  },
  data() {
    return {

      chatShow: false,
     
      createModals: false,
      createFrom: {
        name: '',
        avatar: '',
        announcement: '',
        invite_msg: '',
        intro: '',
        owner_account_id: '',
        invite_account_ids: [],
      },

      owneruserInfo: {}, // 群主信息
      userInfo: [], // 成员信息
      userLists_one: [], // 选择列表
      userLists_duo: [], // 选择列表
      userForm: {
        key_word: '',
        page: 1,
        limit: 10,
      },

      chatForm: {
        word_id: '',
        page: '',
        limit: 15,
      },

      chatRelevanceForm: {
        chat_id: '',
        page: '',
        limit: 15,
      },

      pictureModal: false,
      isChoice: '单选',
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },

      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },

      userModal_duo: false,
      userModal_one: false,
      userModalType: 'one',
      selectUserTitle: '选择群主',
      radioData: {
        uid: '',
        info: {}
      },

    

      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },

      loading: false,
 
      keyWordFrom: {
        key_word: '',
        page: 1,
        limit: 15,
      },

      total: 0,
      total_chat: 0,
      total_up_chat: 0,

      tableData: [],
      chatList: [],
      chatRelevanceList: [],
    };
  },

  mounted() {
    this.getList();
 
  },
  methods: {
    // 
    showChat(id) {
      this.chatForm.word_id = id;
      this.chatShow = true;
      this.chatForm.page = 1;
      this.chatList = [];

      this.getChatList();
    },

    getChatList(val) {
      if (val) {
        this.chatForm.page = val;
      }
      keyWordChatListApi(this.chatForm.word_id, this.chatForm).then(
        res => {
          this.chatList = res.data.list;
          this.total_chat = res.data.count;

        }
      )
    },

    pageChatChange(index) {
      this.chatForm.page = index;
      this.getChatList();
    },


    //新增
    createKeyword() {
      createImKeyword(this.createFrom).then(res => {

        this.$message({
          message: '创建成功',
          type: 'success'
        });
        this.createModals = false;
        this.getList();
      }).catch((res) => {

        this.$message({
          message: res.msg,
          type: 'error'
        })
      });

    },

  

    // 列表
    getList() {
      getKeyWordListApi(this.keyWordFrom)
        .then(async (res) => {
          let data = res.data;
          this.tableData = data.list;
          this.total = data.count;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    pageChange(index) {
      this.keyWordFrom.page = index;
      this.getList();
    },

    // 添加
    addWord() {
      this.createModals = true;
    },
   
    cancel() {
      this.createModals = false;
    },

    // 修改状态
    status(id, status) {
      keyWordStatusApi(id, status)
        .then((res) => {
          this.$message({
            type: 'success',
            message: res.msg || '操作成功',
          });
          this.getList()
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },

  },
};
</script>
<style scoped>
.treeSel ::v-deep .ivu-select-dropdown-list {
  padding: 0 10px !important;
  box-sizing: border-box;
}


.upload-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border: 1px dashed #c0ccda;
  border-radius: 4px;

  vertical-align: middle;
  text-align: center;
  line-height: 58px;
  cursor: pointer;

  +.upload-box {
    margin-left: 10px;
  }

  .ivu-icon {
    vertical-align: middle;
    font-size: 20px;
  }

  .image {
    width: 100%;
    height: 100%;
    border-radius: 3px;
  }

  .btn {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    transform: translate(50%, -50%);
  }

  .tabBox {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }



}

.tabBox_img {
  display: inline;

  align-items: center;

  img {
    cursor: pointer;
    float: left;
    width: 36px;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 100%;

  }

  div {
    line-height: 36px;
    margin-left: 46px;
    ;
    width: 200px;
    height: 36px;
    font-size: 14px;
    color: #333;
  }
}

.tabBox_content {
  margin-top: 18px;
}

.tabBox_content span {
  font-size: 16px;
  color: #555;
}

.point {
  /* 手指 */
  cursor: pointer;
}
</style>
